<template>
    <van-nav-bar :title="lifalg == 0 ? '新增工单' : '新增工单-历史记录'" right-text="按钮" left-arrow @click-left="onClickLeft">
        <template #right>
            <img @click="open" v-if="lifalg == 0" class="img1" src="../../assets/clearAndRemoveList/add.png" alt="">
            <template v-if="flag">
                <img class="img2" src="../../assets/clearAndRemoveList/mo.png" alt="">
                <text class="one" @click="goNewWorkorder">新增工单</text>
                <text class="two" @click="goHistory">历史记录</text>
            </template>
        </template>

    </van-nav-bar>
    <template v-for="(item, index) in totallist" :key="index">
        <div class="box">
            <text class="title">
                {{ item.address }}
            </text>
            <div class="team">
                <div class="a"><text>工单号</text><text>{{ item.clearance_work_order }}</text></div>
                <div class="a"><text>设备编号</text><text>{{ item.code }}</text></div>
                <div class="a"><text>清运重量</text><text>{{ item.weight }}</text></div>
                <div class="a"><text>清运时间</text><text>{{ item.created_at.replace(/-/g, ".").replace("T", " ") }}</text>
                </div>
                <div class="a"><text>投递次数</text><text>1</text></div>
            </div>
            <div class="butbox" :style="lifalg == 0 ? 'justify-content: space-between;' : ' justify-content: center;'">
                <button @click="opena(item)" v-if="lifalg == 0">上传清运结果</button>
                <button @click="goWorkorderHistory(item)">查看投递记录</button>
            </div>
        </div>
        <div class="bo"></div>
    </template>
    <van-overlay :show="show">
        <div class="wrapper">
            <div class="box_mo">
                <div class="title">
                    本次清运有发现违规投递吗?
                </div>
                <div class="but">
                    <button @click="addClean(2)">是</button>
                    <button @click="addClean(1)">否</button>
                </div>
                <img @click="show = false" src="../../assets/clearAndRemoveList/x.png" alt="">
            </div>
        </div>
    </van-overlay>
</template>

<script setup>
// import { showToast } from 'vant';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { getAddWorkOrderList, getfeedback, getRecordList } from '@/api/RemoveList';
import { showToast, showSuccessToast, showFailToast } from 'vant';
// 判断历史
const lifalg = ref(0);
let aa = sessionStorage.getItem("Mykey")
if (aa) {
    lifalg.value = aa
}
const router = useRouter()
const flag = ref(false)
const show = ref(false)
let pageIndex = ref(1)
let pageSize = ref(4)
let totallist = ref([])
let list = ref([])
let totalSize = ref(0)
// 工单号
let listNum = ref("")
// 打开模态
const opena = (v) => {
    show.value = true
    listNum.value = v.clearance_work_order;

}
// 判断
const onClickLeft = () => {
    lifalg.value == 0 ? history.back() : lifalg.value = 0; totallist.value = []; pageIndex.value = 1; pageSize.value = 4;sessionStorage.setItem("Mykey", 0); getList();
    console.log(lifalg.value);

}
const addClean = (v) => {
    // show.value = false
    const data = {
        clearance_work_order: listNum.value,
        feedback: v
    }
    getfeedback(data)
        .then(res => {
            if (res.data.code == 200) {
                showSuccessToast('上传成功');
                show.value = false
            }
            else {
                showFailToast('上传失败');
                show.value = false
            }
        })
}
const open = () => {
    flag.value = true;
}

const goNewWorkorder = () => {
    flag.value = false;
    router.push({
        path: "/NewWorkorder"
    })

}
const goWorkorderHistory = (v) => {
    router.push({
        path: "/WorkorderHistory",
        query: {
            id: v.code
        }
    })
    lifalg.value = 0
    totallist.value = []; pageIndex.value = 1; pageSize.value = 4;
}
// 查看历史记录
const goHistory = () => {
    flag.value = false;
    lifalg.value = 1
    totallist.value = []; pageIndex.value = 1; pageSize.value = 4
    getList()
        sessionStorage.setItem("Mykey", 1)
}
const getList = () => {
    const data = {
        pageIndex: pageIndex.value,
        pageSize: pageSize.value
    }
    if (lifalg.value == 1) {
        getRecordList(data)
            .then(
                res => {
                    list.value = res.data.dataset.list
                    totallist.value = totallist.value.concat(list.value);
                    totalSize.value = res.data.dataset.totalSize
                }
            )
    } else {
        getAddWorkOrderList(data)
            .then(
                res => {
                    list.value = res.data.dataset.list
                    totallist.value = totallist.value.concat(list.value);
                    totalSize.value = res.data.dataset.totalSize
                }
            )
    }


}
getList()
window.addEventListener('scroll', () => {
    const totalHeight = document.documentElement.scrollHeight;
    const scrollTop = window.scrollY || window.pageYOffset;
    const scrollLeft = window.scrollX || window.pageXOffset;
    const Height = window.innerHeight
    console.log();
        if (totalHeight - scrollTop - Height  <= 0) {
            if (pageIndex.value * pageSize.value < totalSize.value) {
                pageIndex.value = pageIndex.value + 1
                getList()
            }
        }
});

</script>

<style lang="less" scoped>
:deep(.van-icon,
    .van-badge__wrapper) {
    color: #000 !important;
}

.img1 {
    height: 1.3em;
}

.van-nav-bar {
    position: relative;
    background-color: #fff;
    padding-bottom: 4vh;
}

.img2 {
    position: absolute;
    right: 0;
    top: 2em;
    width: 7em;
}

.one,
.two {
    font-size: 1em;
    position: absolute;
    display: flex;
    width: 4rem;
    flex-wrap: nowrap;
}

.one {
    top: 3.3em;
    right: 1em;
}

.two {
    top: 4.8em;
    right: 1em;
}

.box {
    width: 100vw;
    height: auto;
    box-sizing: border-box;
    padding: 0 5vw;

    .title {
        display: block;
        font-size: 1em;
        font-weight: 600;
        border-bottom: 1px dashed #8e8e8e80;
        padding-bottom: 1em;
    }
}

.team {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    height: 30vh;
    justify-content: space-evenly;
    font-weight: 500;

}

.butbox {
    display: flex;
    justify-content: space-between;
    padding-top: 3vh;
    padding-bottom: 2vh;

    button {
        color: #3390EE;
        width: 42vw;
        height: 7vh;
        border-radius: 2em;
        border: 2px solid #3390EE;
        background: #fff;
        font-weight: 600;
    }
}

.team .a {
    display: flex;
    justify-content: space-between;
}

.bo {
    height: 3vh;
    background-color: #f8f8f8;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.box_mo {
    position: relative;
    background-color: #fff;
    width: 75vw;
    box-sizing: border-box;
    padding: 5vh 15vw;

    img {
        position: absolute;
        bottom: -10vh;
        left: 50%;
        transform: translateX(-50%);
        width: 5vh;
    }

}

.box_mo .title {
    font-size: 0.8em;
    font-weight: 600;
}

.but {
    margin-top: 3vh;
    display: flex;
    justify-content: space-between;

    button {
        width: 45%;
        height: 5vh;
        border-radius: 1em;
        border: 2px solid #3390EE;
        background: #fff;
        font-weight: 600;
        color: #3390EE;
    }


}
</style>